[V0_FILE]typescriptreact:file="app/layout.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" import type React from "react" import type { Metadata } from "next" import { Figtree } from "next/font/google" import { GeistMono } from "geist/font/mono" import { Instrument_Serif } from "next/font/google" import "./globals.css" const figtree = Figtree({ subsets: ["latin"], weight: ["300", "400", "500", "600", "700"], variable: "--font-figtree", display: "swap", }) const instrumentSerif = Instrument_Serif({ subsets: ["latin"], weight: ["400"], style: ["normal", "italic"], variable: "--font-instrument-serif", display: "swap", }) export const metadata: Metadata = { title: "v0 App", description: "Created with v0", generator: "v0.app", } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" isMerged="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { /* Updated color tokens to match dramatic lighting design brief */ --background: #000000; /* Pure black background */ --foreground: oklch(1 0 0); /* Pure white for text and highlights */ --card: oklch(0.95 0 0); /* Light gray for subtle backgrounds */ --card-foreground: oklch(0 0 0); /* Black text on light cards */ --popover: oklch(1 0 0); /* White for popover backgrounds */ --popover-foreground: oklch(0 0 0); /* Black text in popovers */ --primary: oklch(0.65 0.2 270); /* Violet accent for highlights */ --primary-foreground: oklch(1 0 0); /* White text on violet */ --secondary: oklch(0.95 0 0); /* Light gray for secondary elements */ --secondary-foreground: oklch(0 0 0); /* Black text on secondary */ --muted: oklch(0.25 0 0); /* Dark gray for muted elements */ --muted-foreground: oklch(0.95 0 0); /* Light gray text for muted */ --accent: oklch(0.65 0.2 270); /* Violet for interactive elements */ --accent-foreground: oklch(1 0 0); /* White text on accent */ --destructive: oklch(0.6 0.2 40); /* Amber for destructive actions */ --destructive-foreground: oklch(1 0 0); /* White text for destructive */ --border: oklch(1 0 0); /* White borders for contrast */ --input: oklch(0.95 0 0); /* Light gray for inputs */ --ring: oklch(0.65 0.2 270); /* Violet for focus rings */ --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.5rem; /* Softer rounded corners */ --sidebar: oklch(0 0 0); /* Black sidebar */ --sidebar-foreground: oklch(1 0 0); /* White sidebar text */ --sidebar-primary: oklch(0.65 0 0); /* Violet for primary sidebar */ --sidebar-primary-foreground: oklch(1 0 0); /* White text on sidebar primary */ --sidebar-accent: oklch(0.95 0 0); /* Light gray for sidebar accent */ --sidebar-accent-foreground: oklch(0 0 0); /* Black text on sidebar accent */ --sidebar-border: oklch(1 0 0); /* White sidebar borders */ --sidebar-ring: oklch(0.65 0.2 270); /* Violet for sidebar focus */ --font-instrument-serif: "Instrument Serif", serif; /* Instrument Serif font family configuration */ /* Added Figtree as the primary font variable */ --font-figtree: "Figtree", sans-serif; /* Figtree font family configuration */ } .dark { /* Dark mode maintains the same dramatic black background theme */ --background: #000000; --foreground: oklch(1 0 0); --card: oklch(0.1 0 0); --card-foreground: oklch(1 0 0); --popover: oklch(0.1 0 0); --popover-foreground: oklch(1 0 0); --primary: oklch(0.7 0.25 270); --primary-foreground: oklch(0 0 0); --secondary: oklch(0.15 0 0); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.15 0 0); --muted-foreground: oklch(0.7 0 0); --accent: oklch(0.7 0.25 270); --accent-foreground: oklch(0 0 0); --destructive: oklch(0.5 0.2 40); --destructive-foreground: oklch(1 0 0); --border: oklch(0.3 0 0); --input: oklch(0.15 0 0); --ring: oklch(0.7 0.25 270); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.05 0 0); --sidebar-foreground: oklch(1 0 0); --sidebar-primary: oklch(0.7 0.25 270); --sidebar-primary-foreground: oklch(0 0 0); --sidebar-accent: oklch(0.15 0 0); --sidebar-accent-foreground: oklch(1 0 0); --sidebar-border: oklch(0.3 0 0); --sidebar-ring: oklch(0.7 0.25 270); --font-instrument-serif: "Instrument Serif", serif; /* Instrument Serif font family configuration */ /* Added Figtree font variable for dark mode consistency */ --font-figtree: "Figtree", sans-serif; /* Figtree font family configuration */ } @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); --font-instrument-serif: var(--font-instrument-serif); /* Added Figtree font to theme configuration */ --font-sans: var(--font-figtree); --font-figtree: var(--font-figtree); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; /* Set Figtree as the default font family for the entire website */ font-family: var(--font-figtree); } } .instrument { font-family: var(--font-instrument-serif); } [V0_FILE]typescriptreact:file="components/hero-content.tsx" isMerged="true" "use client" export default function HeroContent() { return (

✨ New Paper Shaders Experience

{/* Main Heading */}

Beautiful Shader
Experiences

{/* Description */}

Create stunning visual experiences with our advanced shader technology. Interactive lighting, smooth animations, and beautiful effects that respond to your every move.

{/* Buttons */}

) } [V0_FILE]typescriptreact:file="components/pulsing-circle.tsx" isMerged="true" "use client" import { PulsingBorder } from "@paper-design/shaders-react" import { motion } from "framer-motion" export default function PulsingCircle() { return (

{/* Pulsing Border Circle */} {/* Rotating Text Around the Pulsing Border */} v0 is amazing • v0 is amazing • v0 is amazing • v0 is amazing •

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isMerged="true" "use client" import Header from "@/components/header" import HeroContent from "@/components/hero-content" import PulsingCircle from "@/components/pulsing-circle" import ShaderBackground from "@/components/shader-background" export default function ShaderShowcase() { return (

) } [V0_FILE]typescriptreact:file="components/header.tsx" isFixed="true" isEdit="true" isQuickEdit="true" isMerged="true" "use client" export default function Header() { return (

{/* Logo */}

{/* Navigation */} {/* Login Button Group with Arrow */}

) } [V0_FILE]typescriptreact:file="components/shader-background.tsx" isFixed="true" isEdit="true" isQuickEdit="true" "use client" import type React from "react" import { useEffect, useRef, useState } from "react" import { MeshGradient } from "@paper-design/shaders-react" interface ShaderBackgroundProps { children: React.ReactNode } export default function ShaderBackground({ children }: ShaderBackgroundProps) { const containerRef = useRef(null) const [isActive, setIsActive] = useState(false) useEffect(() => { const handleMouseEnter = () => setIsActive(true) const handleMouseLeave = () => setIsActive(false) const container = containerRef.current if (container) { container.addEventListener("mouseenter", handleMouseEnter) container.addEventListener("mouseleave", handleMouseLeave) } return () => { if (container) { container.removeEventListener("mouseenter", handleMouseEnter) container.removeEventListener("mouseleave", handleMouseLeave) } } }, []) return (

{/* SVG Filters */} {/* Background Shaders */} {children}

) }

Beautiful Shader Experiences

Beautiful Shader
Experiences

About

Tags

Share

About

Tags

Share

More from legiondev

More Templates Like This

About

Tags

Share

About

Tags

Share

More from legiondev

More Templates Like This